<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆安全密码生成器</title>
    <meta name="description" content="基于VIN和日期生成车辆安全密码的工具">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="theme-controls">
            <button class="theme-btn" id="theme-toggle" aria-label="切换主题">
                <i class="fas fa-palette"></i>
            </button>
            <div class="theme-picker" id="theme-picker">
                <h4>选择主题色</h4>
                <div class="theme-options">
                    <div class="theme-option" data-color="#4DA89D" style="background: #4DA89D;"></div>
                    <div class="theme-option" data-color="#4361ee" style="background: #4361ee;"></div>
                    <div class="theme-option" data-color="#3a0ca3" style="background: #3a0ca3;"></div>
                    <div class="theme-option" data-color="#7209b7" style="background: #7209b7;"></div>
                    <div class="theme-option" data-color="#f72585" style="background: #f72585;"></div>
                    <div class="theme-option" data-color="#480ca8" style="background: #480ca8;"></div>
                    <div class="theme-option" data-color="#4cc9f0" style="background: #4cc9f0;"></div>
                    <div class="theme-option" data-color="#4895ef" style="background: #4895ef;"></div>
                    <div class="theme-option" data-color="#2ec4b6" style="background: #2ec4b6;"></div>
                    <div class="theme-option" data-color="#e71d36" style="background: #e71d36;"></div>
                    <div class="theme-option" data-color="#ff9f1c" style="background: #ff9f1c;"></div>
                    <div class="theme-option" data-color="#011627" style="background: #011627;"></div>
                </div>
                <div class="custom-color-picker">
                    <label for="custom-color">自定义颜色</label>
                    <input type="color" id="custom-color" value="#4DA89D">
                </div>
                <div class="theme-actions">
                    <button class="btn secondary" id="theme-cancel">取消</button>
                    <button class="btn primary" id="theme-confirm">确定</button>
                </div>
            </div>
        </div>

        <header class="header">
            <h1>车辆安全密码系统</h1>
            <p>VIN与日期加密认证服务</p>
        </header>

        <main class="content">
            <form id="code-form">
                <div class="form-group">
                    <label for="vin">车辆VIN码</label>
                    <div class="input-wrapper">
                        <input type="text" id="vin" placeholder="请输入17位VIN码" value=""
                            aria-describedby="vin-error" required>
                        <div class="error-message" id="vin-error">VIN码格式不正确（需17位大写字母数字组合）</div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="date">有效期</label>
                    <div class="input-wrapper">
                        <input type="date" id="date" min="2000-01-01" required aria-describedby="date-error">
                        <div class="error-message" id="date-error">请选择有效日期</div>
                    </div>
                </div>

                <div class="button-group">
                    <button type="button" class="btn primary" id="generate-daily">
                        <i class="fas fa-key"></i> 生成当天密码
                    </button>
                    <button type="button" class="btn" id="generate-monthly">
                        <i class="fas fa-calendar-alt"></i> 生成月度密码
                    </button>
                </div>
            </form>

            <section class="result-container" aria-live="polite">
                <h2>生成结果</h2>
                <div class="result-box" id="daily-result">
                    <textarea id="result" rows="1" readonly aria-label="生成的密码"></textarea>
                    <button class="btn copy-btn" id="copy-result" aria-label="复制密码">
                        <i class="far fa-copy"></i> 复制密码
                    </button>
                    <button class="btn copy-btn copy-btn-adb" id="copy-result-adb" aria-label="复制密码">
                        <i class="far fa-copy"></i> 复制ADB命令
                    </button>

                </div>
                <div class="button-group" style="display: none;">

                    <button class="btn" id="copy-all-monthly" style="display: none;">
                        <i class="fas fa-copy"></i> 复制整月密码
                    </button>
                    <button class="btn" id="copy-all-monthly-adb" style="display: none;">
                        <i class="fas fa-copy"></i> 复制整月ADB命令
                    </button>
                </div>
                <div id="monthly-results">
                    <div id="monthly-results-list"></div>
                </div>
            </section>
        </main>
    </div>

    <div class="toast" id="toast" role="alert">
        <i class="fas fa-check-circle toast-icon"></i>
        <span id="toast-message">密码已复制到剪贴板</span>
    </div>
    <script src="./index.js"></script>

</body>

</html>
